<template>
	<div>
		<el-row>
			<div class="top">
				<p class="title">资产基本信息</p>
				<el-button type="primary" @click="$router.go(-1)" v-if="Moder.control != true">返回</el-button>
			</div>
			<div style="display:flex;align-items: center;">
				<div style="width: 100%">
					<el-descriptions class="margin-top" :column="3" border>
						<el-descriptions-item label="资产名称">{{ Moder.DeviceName }}</el-descriptions-item>
						<el-descriptions-item label="资产唯一编码">{{ Moder.DeviceUUID }}</el-descriptions-item>
						<el-descriptions-item label="从属部门">{{ findValueByKey(Moder.DepartmentID, DepartmentList, 'ID', 'Name')}}</el-descriptions-item>
						<el-descriptions-item label="计算机名称">{{ Moder.ComputerName }}</el-descriptions-item>
						<el-descriptions-item label="操作系统">{{ Moder.OsDetail }}</el-descriptions-item>
						<el-descriptions-item label="资产类型">{{ Moder.DeviceType }}</el-descriptions-item>
						<el-descriptions-item label="资产备注">{{ Moder.UserName }}</el-descriptions-item>
						<el-descriptions-item label="使用者角色">{{ Moder.Role }}</el-descriptions-item>
						<el-descriptions-item label="硬件唯一编码">{{ Moder.HardID }}</el-descriptions-item>
						<el-descriptions-item label="联系电话">{{ Moder.Phone }}</el-descriptions-item>
						<el-descriptions-item label="开始使用日期">{{ parseTime(Moder.StartDate, '{y}-{m}-{d}') ||
							'-' }}</el-descriptions-item>
						<el-descriptions-item label="创建时间">{{ parseTime(Moder.CreateTime) || '-' }}</el-descriptions-item>
						<el-descriptions-item label="描述">{{ Moder.Descp || '-' }}</el-descriptions-item>
					</el-descriptions>
				</div>
				<div style="width: 150px;margin-left: 10px;">
					<el-avatar :size="150" :src="avatarSrc" fit="cover">
					</el-avatar>
				</div>
			</div>
		</el-row>
		<el-row>
			<p class="title">资产动态信息</p>
			<el-descriptions style="margin-top:15px" :column="3" border>
				<el-descriptions-item label="资产状态">
					<span>
						<span style="color:#67C23A" v-if="Moder.Status === 1" type="success">在线</span>
						<span style="color:#F56C6C" v-if="Moder.Status !== 1" type="danger">离线</span>
					</span>
				</el-descriptions-item>
				<el-descriptions-item label="工作状态">
					<span>{{ formatWorkStatus(Moder) }}</span>
				</el-descriptions-item>
				<el-descriptions-item label="资产时钟状态">
					<span v-if="Moder.Status !== 1">-</span>
					<span v-else>
						<span style="color:#67C23A" v-if="Math.abs(Date.now() / 1000 - Moder.DeviceTime) < 600"
							type="success">正常</span>
						<span style="color:#F56C6C" v-else type="danger">异常</span>
					</span>
				</el-descriptions-item>
				<el-descriptions-item label="最近性能上送时间">
					<span v-if="Moder.LastReportStatusTime">{{ parseTime(Moder.LastReportStatusTime) }}（{{ formatTime2(Moder.LastReportStatusTime) }}）</span>
					<span v-else>初始化</span>
				</el-descriptions-item>
				<el-descriptions-item label="最近上下线时间">
					<span v-if="Moder.LastReportStatusTime && Moder.StatusChangeTime">
						{{ parseTime(Moder.StatusChangeTime) }}（{{ formatTime2(Moder.StatusChangeTime) }}）
					</span>
				</el-descriptions-item>
				<el-descriptions-item label="最近握手心跳时间">
					<span v-if="Moder.LastEchoTime">
						{{ parseTime(Moder.LastEchoTime) }}（{{ formatTime2(Moder.LastEchoTime) }}）
					</span>
				</el-descriptions-item>
				<el-descriptions-item label="电脑开机时长">{{ formatDuration(Moder.KeepRunningTime) }}</el-descriptions-item>
				<el-descriptions-item label="设备软件版本">{{ Moder.Version }}</el-descriptions-item>
				<el-descriptions-item label="设备mac"><span>{{ Moder.Mac }}</span></el-descriptions-item>
				<el-descriptions-item label="登录账号">{{ Moder.Account }}</el-descriptions-item>
				<el-descriptions-item label="计算机名称">{{ Moder.ComputerName }}</el-descriptions-item>
				<el-descriptions-item label="资产IP">{{ Moder.DeviceIP }}</el-descriptions-item>
				<el-descriptions-item label="操作系统激活状态">
					<span>
						<span style="color:#67C23A" v-if="Moder.OsActive == 'Activated'" type="success">激活</span>
						<span style="color:#F56C6C" v-else type="danger">未激活</span>
					</span>
				</el-descriptions-item>
				<el-descriptions-item label="操作系统授权码"><span>{{ Moder.OsCode }}</span></el-descriptions-item>
				<el-descriptions-item label="扩展磁盘使用率">
					<div v-if="!Moder.Disk_Ext_Total">-</div>
					<div v-else style="display: flex; align-items: center;justify-content: space-between;">
						<div style="width:80%">
							<el-progress :stroke-width="10" :percentage="calcPercentage(Moder.Disk_Ext_Used, Moder.Disk_Ext_Total)" />
						</div>
						<span style="white-space: nowrap;">{{ formatBytes_back(Moder.Disk_Ext_Used) }}<span
								v-if=Moder.Disk_Ext_Used>
								/ </span>{{ formatBytes_back(Moder.Disk_Ext_Total) }}</span>
					</div>
				</el-descriptions-item>
				<el-descriptions-item label="系统磁盘使用率">
					<div style="display: flex; align-items: center;justify-content: space-between;">
						<div style="width:80%">
							<el-progress :stroke-width="10" :percentage="calcPercentage(Moder.Disk_Sys_Used, Moder.Disk_Sys_Total)" />
						</div>
						<span style="white-space: nowrap;">{{ formatBytes_back(Moder.Disk_Sys_Used) }}<span
								v-if=Moder.Disk_Sys_Used>
								/ </span>{{ formatBytes_back(Moder.Disk_Sys_Total) }}</span>
					</div>
				</el-descriptions-item>
				<el-descriptions-item label="内存使用率">
					<div style="display: flex; align-items: center;justify-content: space-between;">
						<div style="width:80%">
							<el-progress :stroke-width="10" :percentage="calcPercentage(Moder.Memeory_Used, Moder.Memeory_Total)" />
						</div>
						<span style="white-space: nowrap;">{{ formatBytes_back(Moder.Memeory_Used) }}<span v-if=Moder.Memeory_Used>
								/
							</span>{{ formatBytes_back(Moder.Memeory_Total) }}</span>
					</div>
				</el-descriptions-item>
				<el-descriptions-item label="CPU使用率">
					<div style="width:100%">
						<el-progress :stroke-width="10" :percentage="Moder.CPUUsedPert" />
					</div>
				</el-descriptions-item>
			</el-descriptions>
		</el-row>
	</div>
</template>

<script>
import { formatDuration, parseTime, formatTime2, formatBytes_back, findValueByKey } from '@/utils/index'
import { connrequest } from "@/api/firstPage.js"

export default {
	name: 'assetsInfo',
	data() {
		return {
			defaultAvatar: 'path/to/default/avatar.png', // 默认头像的 URL
			avatarSrc: '', // 初始值，稍后通过异步方法更新
			DepartmentList: []
		};
	},
	computed: {
		avatarSrc() {
			if (this.$isFromCenter === true && this.Moder?.FileUUID) {
				return this.Moder.FileUUID;
			} else if (this.$isFromCenter === false && this.Moder?.FileUUID) {
				return `/ProfilePhoto/${this.Moder.FileUUID}`;
			} else {
				return 'path/to/default/avatar.png';
			}
		}
	},
	props: {
		Moder: {
			type: Object,
			default: function () {
				return {}
			}
		}
	},
	created() {
		this.GetDepartmentDeviceSumTree()
	},
	mounted() { 
		console.log(this.Moder.FileUUID);
	},
	methods: {
		parseTime,
		formatTime2,
		formatDuration,
		findValueByKey,
		formatBytes_back,
		// 计算百分比
		calcPercentage(used, total) {
			if (!used || !total) return 0
			return ((used / total) * 100).toFixed(1) * 1
		},
		// 状态格式化方法
		formatWorkStatus(row) {
			const map = {
				1: '工作',
				2: '娱乐',
				3: '锁定',
				4: '屏保',
				5: '离线',
				10: '其他'
			}
			return map[row.WorkStatus] || '未知状态' // 处理未定义状态码
		},
		async GetDepartmentDeviceSumTree() {
			const res = await connrequest('GetDepartmentDeviceSumTree')
			this.DepartmentList = res.Data.Department
		}
	}

}
</script>
<style lang="scss" scoped>
.top {
	display: flex;
	justify-content: space-between;
	align-content: center;

	.el-button {
		margin-bottom: 10px;
	}
}

::v-deep .el-progress-bar {
	width: 70%;
	/* 设置进度条的宽度 */
	/* 添加其他样式属性 */
}

::v-deep .el-descriptions-item__label.is-bordered-label {
	width: 200px;
}
</style>